<template>
  <div class="m-login">
    <!-- 商城登录 -->
    <div class="app-container login-tabel clearfix">
      <div class="fr m-tab">
        <!-- <div class="login-title">
          <div class="login-logo">
            <img src="../assets/logodenglu.png" alt="">
          </div>
          <span class="icon">|</span>
          <div class="title">忘记密码</div>
        </div> -->
        <!-- input框 -->
        <w-form-validate @on-validate="onValidate">
          <div class="login-input-group">
            <div class="user-input">
              <span>账号</span>
              <div class="iput">
                <w-input v-model="userName" holder="请输入账号" rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <div class="user-input">
              <span>手机号</span>
              <div class="iput">
                <w-input v-model="phone" holder="请输入手机号" rule="isEmpty|isMobile" error="*此项必填|*手机号为11位"></w-input>
              </div>
            </div>
            <div class="clearfix">
              <div class="user-input user-code fl">
                <span>验证码</span>
                <div class="iput input-code">
                  <w-input v-model="code" holder="请输入验证码" rule="isEmpty|onlyInt" error="*此项必填|*验证码为纯数字"></w-input>
                </div>
              </div>
              <div class="login-code fr">
                <w-button-timer @on-click='onGetCode'></w-button-timer>
              </div>
            </div>
            <div class="user-input">
              <span>新密码</span>
              <div class="iput">
                <w-input type="password" v-model="newPassword" holder="请输入新密码" rule="isEmpty|isPassword" error="*此项必填|*密码需6至20位"></w-input>
              </div>
            </div>
          </div>
          <!-- 登录 -->
          <button type="submit" class="btn btn-login">提交</button>
        </w-form-validate>
      </div>
    </div>
  </div>
</template>

<script>
import { apiFindPwd, apiMsgCode } from 'js/api'

export default {
  data() {
    return {
      userName: '', // 账户
      phone: '', // 手机号
      newPassword: '', // 密码
      code: '', // 短信验证码
      smsCode: ''
    }
  },
  methods: {
    /**
     * 获取短信验证码
     */
    onGetCode() {
      if (!this.phone) {
        this.$toast('先输入手机号码')
        return
      }
      apiMsgCode.getMsgCode(this.phone).then(data => {
        if (data.code != '200') return
        this.smsCode = data.data
      })
    },
    /** 
     * 输入框失去焦点，验证 短信验证码
    */
    // OnChangeVal() {
    //   apiMsgCode.valMsgCode(this.code, this.phone).then(data => {
    //     if (data.code != '200') {
    //       this.$toast('验证码错误!')
    //     }
    //   })
    // },
    /**
     * 提交
     */
    onValidate() {
      apiFindPwd(this.userName, md5(this.newPassword), this.phone, this.code).then(data => {
        if (data.code != '200') return
        this.$toast('提交成功!', () => {
          this.$router.push(`/login`)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.m-login {
  .login-input-group {
    .w-input input {
      background-color: #EBEBED;
    }
    .form-control {
      border: none
    }
  }
}
</style>

<style lang="scss" scoped>
.m-login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../assets/beijing.png) no-repeat;
}
.login-tabel {
  position: absolute;
  height: 600px;
  z-index: 2;
  margin: auto;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  .m-tab {
    width: 600px;
    height: inherit;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 56px 60px;
  }
  .login-input-group {
    margin: 50px 0;
  }
  .login-title {
    height: 48px;
    margin: 0 auto;
    text-align: center;
    .login-logo {
      width:104px;
      display: inline-block;
    }
    .icon {
      margin: 0 30px;
      color: #D8D8D8;
      font-size:36px;
      vertical-align: top;
    }
    .title {
      display: inline-block;
      font-size:36px;
      vertical-align: text-bottom;
    }
  }
  .user-input {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    padding: 0 30px;
    background-color: #EBEBED;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .iput {
    width: 320px;
    display: inline-block;
    margin-left: 32px;
  }
  .user-code {
    width: 300px;
    display: inline-block;
    .input-code {
      width: 140px;
    }
  }
  .login-code {
    display: inline-block;
    border-radius: 10px;
    button {
      width: 150px;
      height: 50px;
    }
  }
  .btn-login {
    width: 100%;
    height: 50px;
  }
  .error-tip {
    position: absolute;
    margin-top: -10px;
    color: #a94442;
    margin-left: 60px;
  }
}
</style>
